<template>
  <div class="app-container">

    <div v-loading="listLoading" class="top clearfix">
      <div class="mt-top">
        类别：
        <el-select
          v-model="category_id"
          v-loading="categoriesLoading"
          placeholder="分类"
          class="head"
          filterable
          style="width: 150px;margin-right: 5px"
          clearable
        >
          <el-option
            v-for="category in categories"
            :key="category.id"
            :label="category.name"
            :value="category.id"
          />
        </el-select>

        语言：
        <el-select
          v-model="language_id"
          v-loading="languagesLoading"
          placeholder="语言"
          class="head"
          filterable
          style="width: 100px;margin-right: 5px"
          clearable
        >
          <el-option
            v-for="language in languages"
            :key="language.id"
            :label="language.name"
            :value="language.id"
          />
        </el-select>

        所有：
        <el-select
          v-model="owner_id"
          v-loading="ownersLoading"
          placeholder="所有者或发布人"
          class="head"
          filterable
          style="width: 150px;margin-right: 5px"
          clearable
        >
          <el-option
            v-for="user in users"
            :key="user.id"
            :label="user.show_name"
            :value="user.id"
          />
        </el-select>
        写手：
        <el-select
          v-model="writer_id"
          v-loading="ownersLoading"
          placeholder="写手"
          class="head"
          filterable
          style="width: 150px;margin-right: 5px"
          clearable
        >
          <el-option value="1" label="系统自动" />
          <el-option
            v-for="user in users"
            :key="user.id"
            :label="user.show_name"
            :value="user.id"
          />
        </el-select>
        发布：
        <el-select
          v-model="is_finished"
          placeholder="发布情况"
          style="width: 100px"
          clearable
        >
          <el-option
            label="所有"
            value=""
          />
          <el-option
            label="未发布"
            value="0"
          />
          <el-option
            label="已经发布"
            value="1"
          />
        </el-select>
        完成：
        <el-select
          v-model="writer_finished"
          placeholder="完成情况"
          style="width: 100px"
          clearable
        >
          <el-option
            label="所有"
            value=""
          />
          <el-option
            label="写完"
            value="1"
          />
          <el-option
            label="未完成"
            value="0"
          />
        </el-select>
        通过：
        <el-select
          v-model="owner_pass"
          placeholder="审核状态"
          style="width: 100px"
          clearable
        >
          <el-option
            label="所有"
            value=""
          />
          <el-option
            label="通过"
            value="1"
          />
          <el-option
            label="未审核"
            value="0"
          />
        </el-select>
        <!--       <el-switch-->
        <!--         style="margin-right: 10px"-->
        <!--            v-model="writer_finished"-->
        <!--            title="写作完成"-->
        <!--            active-color="#13ce66"-->
        <!--            inactive-color="#ff4949">-->
        <!--       </el-switch>-->
        <span v-if="!is_out_writer()">
          输出站点：
          <el-select
            v-model="web_id"
            v-loading="websLoading"
            placeholder="输出站点"
            class="head"
            style="width: 200px"
            clearable
            filterable
          >
            <el-option
              v-for="web in webs"
              :key="web.id"
              :label="web.url"
              :value="web.id"
            />
          </el-select>
        </span>

      </div>
      <el-row>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-date-picker
            v-model="timerange"
            type="datetimerange"
            value-format="timestamp"
            :picker-options="pickerOptions"
            range-separator="至"
            :default-time="['0:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-input
            v-model="kwInput"
            placeholder="输入文章标题进行筛选"
            class="input-with-select"
            clearable
            @keyup.native.enter="handleSearch"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </el-input>
        </el-col>
      </el-row>
    </div>

    <div class="mt-table clearfix">
      <el-table
        v-loading.body="listLoading"
        :data="data"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @cell-mouse-enter="(m) => m.active=true"
        @cell-mouse-leave="(m) => m.active=false"
        @sort-change="handleSort"
      >
        <el-table-column align="center" label="ID" prop="id" width="100" sortable="custom" />
        <el-table-column align="left" label="标题" prop="title" sortable="custom">
          <template slot-scope="scope">
            <span v-if="scope.row.category__name" :style="'color:'+scope.row.category__color">
              {{ '[' + scope.row.category__name + ']' }}</span>
            <span class="" :title="scope.row.title">{{ scope.row.title }}</span>
            <el-popover
              placement="top-start"
              title="详情"
              width="400"
              trigger="click"
            >
              <el-descriptions title="" :column="1">
                <el-descriptions-item label="输出网站">{{ scope.row.outputurl }}</el-descriptions-item>
                <el-descriptions-item label="字数">{{ scope.row.word_count }}</el-descriptions-item>
                <el-descriptions-item label="修改时间">{{ scope.row.update_at }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ scope.row.create_at }}</el-descriptions-item>
                <el-descriptions-item label="指定发布时间">{{ scope.row.post_at }}</el-descriptions-item>
              </el-descriptions>
              <span slot="reference" style="float: right;display: inline-block;color:#dec9c9;margin-left: 5px;"><i class="el-icon-info" />[{{ scope.row.word_count }}]{{ scope.row.post_at }}</span>
            </el-popover>
            <div v-if="scope.row.active" class="mt-row-btns">
              <a v-if="scope.row.deleteable" class="mt-btn danger" title="删除文章" @click="handleClickDelete(scope.row)">
                <i class="el-icon-delete mt-icon" /></a>
              <a v-if="scope.row.editable" class="mt-btn edit" title="编辑文章" @click="handleClickEdit(scope.row.id)">
                <i class="el-icon-edit mt-icon" /></a>
              <a class="mt-btn" title="查看文章" @click="handleClickView(scope.row.id)">
                <i class="el-icon-view mt-icon" /></a>
              <a class="mt-btn default" title="分享链接" @click="handleClickShare(scope.row.id, $event)">
                <i class="el-icon-share mt-icon" /></a>
              <a v-if="scope.row.post_url" class="mt-btn default" title="第三方推广博文" :href="scope.row.post_url" target="_blank">
                <i class="el-icon-link mt-icon" /></a>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="!is_out_writer()" align="center" label="发布" prop="is_finished" width="80" sortable="custom">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_finished"
              :disabled="!scope.row.editable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleChangePostFinishStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="写完" prop="is_finished" width="80" sortable="custom">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.writer_finished"
              :disabled="!scope.row.editable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleChangeWriterFinished(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核" prop="is_finished" width="80" sortable="custom">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.owner_pass"
              :disabled="!scope.row.editable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="handleChangeOwnerPass(scope.row)"
            />
          </template>
        </el-table-column>

        <el-table-column align="center" label="语言" prop="language__name" width="140" sortable="custom">
          <template slot-scope="scope">
            <span
              v-if="scope.row.language__name"
              :style="'padding: 6px 10px;font-size: 14px;box-sizing:border-box;border-radius:6px;text-align:center;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;color:#fff;background:'+scope.row.language__color"
            >
              {{ scope.row.language__name }}</span>
          </template>
        </el-table-column>

        <el-table-column v-if="!is_out_writer()" align="center" label="写手" prop="writer__username" sortable="custom" width="150">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.writer_id"
              placeholder="指定写手"
              filterable
              clearable
              @change="handleChangePostWriter(scope.row)"
            >
              <el-option
                v-for="user in users"
                :key="user.id"
                :label="user.show_name"
                :value="user.id"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所有者" prop="owner__name" width="150" sortable="custom">
          <template slot-scope="scope">
            <!--            <el-tag :title="scope.row.owner__username">{{ scope.row.owner__username }}</el-tag>-->
            <el-select
              v-model="scope.row.owner_id"
              placeholder="指定写手"
              filterable
              clearable
              @change="handleChangePostOwner(scope.row)"
            >
              <el-option
                v-for="user in users"
                :key="user.id"
                :label="user.show_name"
                :value="user.id"
              />
            </el-select>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        v-if="data.length"
        background
        class="mt-pagination"
        :current-page="page"
        :page-sizes="[10,20,50,100]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />

      <el-dialog
        v-loading.fullscreen.lock="deleteDialogLoading"
        :title="deleteDialogTitle"
        :visible.sync="deleteDialogVisible"
        style="margin-top: 148px !important;"
      >
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="danger" @click="handleDeleteConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import { Get as GetProjects } from '@/api/erp/elicink/project'
import { Get as GetCategories } from '@/api/cms/category'
import { Get as GetLanguages } from '@/api/cms/language'
import { Put, Delete, dt } from '@/api/cms/post'
import { Get as GetWebs } from '@/api/cms/web'
import { CRMGetProjectUsers as GetUsers } from '@/api/crm/crmmanage'
import clip from '@/utils/clipboard' // use clipboard directly
import qs from 'qs'
import { has_permission } from '../../assets/common'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}

import Cookies from 'js-cookie'

// const ProjectKey = 'cms_project_id__search'
const CategoryKey = 'cms_category_id__search'
const LanguageKey = 'cms_language_id__search'
const OwnerKey = 'cms_language_id__owner'
const WebKey = 'cms_web_id__owner'

export function getToken(key) {
  const v = Cookies.get(key)
  return v && parseInt(v) || null
}

export function setToken(key, value) {
  return Cookies.set(key, value)
}

export default {
  data() {
    return {
      owner_pass: '',
      writer_finished: '',
      is_finished: '0',
      listLoading: false,

      projects: [],
      project_id: null,
      projectsLoading: false,

      categories: [],
      category_id: null,
      categoriesLoading: false,

      languages: [],
      language_id: null,
      languagesLoading: false,

      users: [],
      owner_id: '',
      writer_id: '',
      ownersLoading: false,

      webs: [],
      web_id: null,
      websLoading: false,

      title: '',
      content: '',
      saveDisabled: false,
      init_text: '',

      kwInput: '',
      data: [],
      order_by: 'id',
      order_desc: '1',
      // pagination
      pagesize: 10,
      page: 1,
      total: 0,

      m_active: false,

      deleteDialogVisible: false,
      deleteDialogTitle: '',
      deleteId: null,
      deleteDialogLoading: false,
      timerange: '',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime())
            start.setHours(0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天下班后',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setHours(19, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近3天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            start.setHours(0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '过去14天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '过去30天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近1年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  watch: {
    project_id(newValue, oldValue) {
      if (newValue !== oldValue) {
        // 当 projectId 改变时执行的操作
        this.getList()
      }
    }

  },
  created() {
    this.project_id = this.$store.getters.projectId
    this.category_id = getToken(CategoryKey)
    this.language_id = getToken(LanguageKey)
    this.owner_id = getToken(OwnerKey)
    this.web_id = getToken(WebKey)

    // this.handleFetchProjects()
    this.handleFetchCategories()
    this.handleFetchLanguages()
    this.handleFetchWebs()
    this.handleFetchGetUsers()
    if (has_permission()) {
      this.web_id = ''
    }
    this.getList()
  },
  methods: {
    handleChangePostWriter(row) {
      Put(row.id, JSON.stringify({
        writer_id: row.writer_id
      }))
        .then(response => {
          this.$message.success('修改写手成功')
        })
        .catch(e => { })
    },
    handleChangePostOwner(row) {
      Put(row.id, JSON.stringify({
        owner_id: row.owner_id
      }))
        .then(response => {
          this.$message.success('修改所有者成功')
        })
        .catch(e => { })
    },
    is_out_writer() {
      return has_permission()
    },
    // handleFetchProjects() {
    //   this.projectsLoading = true
    //   GetProjects()
    //     .then(response => {
    //       this.projectsLoading = false
    //       this.projects = response.data.data
    //       if (this.projects.length) {
    //         this.project_id = getToken(ProjectKey) || null
    //       }
    //     })
    //     .catch(e => {
    //       this.projectsLoading = false
    //     })
    // },
    handleFetchCategories() {
      this.categoriesLoading = true
      GetCategories()
        .then(response => {
          this.categoriesLoading = false
          this.categories = response.data.data
          if (this.categories.length) {
            this.category_id = getToken(CategoryKey) || null
          }
        })
        .catch(e => {
          this.categoriesLoading = false
        })
    },
    handleFetchLanguages() {
      this.languagesLoading = true
      GetLanguages()
        .then(response => {
          this.languagesLoading = false
          this.languages = response.data.data
          if (this.languages.length) {
            this.language_id = getToken(LanguageKey) || null
          }
        })
        .catch(e => {
          this.languagesLoading = false
        })
    },
    handleFetchWebs() {
      this.websLoading = true
      GetWebs()
        .then(response => {
          this.websLoading = false
          this.webs = response.data.data
          if (this.webs.length) {
            this.web_id = getToken(WebKey) || null
          }
        })
        .catch(e => {
          this.websLoading = false
        })
    },
    handleFetchGetUsers() {
      this.ownersLoading = true
      GetUsers(null, qs.stringify({ 'is_active': 1 }))
        .then(response => {
          this.ownersLoading = false
          this.users = response.data.data
          if (this.users.length) {
            this.owner_id = getToken(OwnerKey) || null
          }
        })
        .catch(e => {
          this.ownersLoading = false
        })
    },
    getList(loading) {
      if (loading === undefined) {
        loading = true
      }
      this.listLoading = loading
      dt(JSON.stringify({
        kw: this.kwInput,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc,
        owner_id: this.owner_id,
        writer_id: this.writer_id,
        writer_finished: this.writer_finished,
        owner_pass: this.owner_pass,
        project_id: this.project_id,
        category_id: this.category_id,
        is_finished: this.is_finished,
        language_id: this.language_id,
        start: this.timerange ? this.timerange[0] : '',
        end: this.timerange ? this.timerange[1] : '',
        web_id: this.web_id
      }))
        .then(response => {
          this.scrollTop()
          // setToken(ProjectKey, this.project_id)
          setToken(CategoryKey, this.category_id)
          setToken(LanguageKey, this.language_id)
          setToken(OwnerKey, this.owner_id)
          setToken(WebKey, this.web_id)

          this.data = response.data.data.map(m => {
            this.$set(m, 'active', false)
            return m
          })
          this.listLoading = false
          this.total = response.data.total
        }).catch(e => {
          this.listLoading = false
        })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    handleClickEdit(id) {
      const link = this.$router.resolve({ name: 'editPostPut', params: { post_id: id }})
      window.open(link.href, '_blank')
    },
    handleClickView(id) {
      // this.$router.push({ name: 'viewPost', params: { post_id: id }})
      const link = this.$router.resolve({ name: 'viewPost', params: { post_id: id }})
      window.open(link.href, '_blank')
    },
    handleClickDelete(row) {
      this.deleteDialogVisible = true
      this.deleteDialogTitle = `确认要删除文章 ${row.title}?`
      this.deleteId = row.id
    },
    handleDeleteConfirm() {
      this.deleteDialogLoading = true
      Delete(this.deleteId)
        .then(res => {
          this.deleteDialogLoading = false
          this.deleteDialogVisible = false
          this.getList()
        }).catch(e => {
          this.deleteDialogLoading = false
        })
    },
    handleClickShare(v, event) {
      const link = this.$router.resolve({
        name: 'viewPost',
        params: {
          post_id: v
        }
      })
      clip(window.location.origin + '/' + link.href, event)
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: 1500
      })
    },
    handleChangeWriterFinished(row) {
      Put(row.id, JSON.stringify({
        writer_finished: row.writer_finished,
        put_finished: 1
      }))
        .then(response => {
          this.$notify({
            title: '成功',
            message: '修改状态成功',
            type: 'success',
            duration: 1000
          })
        })
        .catch(e => { })
    },
    handleChangeOwnerPass(row) {
      Put(row.id, JSON.stringify({
        owner_pass: row.owner_pass,
        put_finished: 1
      }))
        .then(response => {
          this.$notify({
            title: '成功',
            message: '修改状态成功',
            type: 'success',
            duration: 1000
          })
        })
        .catch(e => { })
    },
    handleChangePostFinishStatus(row) {
      Put(row.id, JSON.stringify({
        is_finished: row.is_finished,
        put_finished: 1
      }))
        .then(response => {
          this.$notify({
            title: '成功',
            message: '修改状态成功',
            type: 'success',
            duration: 1000
          })
        })
        .catch(e => { })
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .head {
    width: calc(20% - 70px);
  }

  .web {
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
  }

  .web >>> .el-input {
    min-width: 1200px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 68px;
  }

  .mt-detail:hover, .svg-icon:hover {
    cursor: pointer;
  }

  .mt-detail {
    color: #1976d2;
  }

  .mt-dialog >>> .el-dialog {
    margin: 88px auto !important;
  }

  .clearfix ::after {
    content: "";
    clear: both
  }

  .mt-table {
    color: black;
    padding: 20px;
  }

  .mt-pagination {
    float: right;
    margin-top: 10px;
  }

  .mt-top {
    margin: 15px 0;
  }

  .mt-row-btn {
    float: right;
    vertical-align: middle;
    color: white;
  }

  .mt-btn {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    border-radius: 1000px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-collapse: collapse;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    color: #46be8a;
    cursor: pointer;
    display: block;
    float: right;
    font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
    font-size: 14px;
    font-weight: 400;
    height: 26px;
    hyphens: manual;
    line-height: 14px;
    margin-bottom: 0px;
    margin-right: 10px;
    padding: 5px;
    text-align: center;
    text-decoration-color: rgb(82, 96, 105);
    text-decoration-line: none;
    text-decoration-style: solid;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    touch-action: manipulation;
    transition-delay: 0s, 0s, 0s, 0s;
    transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
    transition-property: border, color, width, background-color;
    transition-timing-function: linear, linear, linear, linear;
    user-select: none;
    vertical-align: middle;
    visibility: visible;
    white-space: nowrap;
    background: white;
  }

  .mt-btn:hover + >>> .mt-icon {
    color: #fff;
  }

  .mt-btn:hover {
    background: #46be8a;
  }

  .danger:hover {
    background-color: #F56C6C;
  }

  .danger {
    color: #F56C6C;
  }

  .default:hover {
    background-color: #62a8ea;
  }

  .default {
    color: #62a8ea;
  }

  .edit:hover {
    background-color: #909399;
  }

  .edit {
    color: #909399;
  }

  .mt-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 220px);
    display:inline-block;
    vertical-align: middle;
  }

  .mt-row-btns {
    float: right;
    margin-right: 10px;
    z-index: 10000;
  }

</style>
